<script>
import commonNav from "@/components/nav/commonNav.vue"
import storage from "@/utils/storage.js"
import moment from 'moment'
import { getGoalDetails, updateSewingGoal } from '@/api/lineProductionAim.js'

export default {
  components: { commonNav },
  data() {
    return {
      currentSewLine: storage.get('currentSewLineInfo') || {
        sewingName: '未选择缝制线'
      },
      id: '',
      sewingId: '',
      navTitle: this.$t('home.lineProductionAim'),
      productionNum: 0,
      timeInfo: [
        { bgTime: "07:00", endTime: "08:00", value: 0 },
        { bgTime: "08:00", endTime: "09:00", value: 0 },
        { bgTime: "09:00", endTime: "10:00", value: 0 },
        { bgTime: "10:00", endTime: "11:00", value: 0 },
        { bgTime: "11:00", endTime: "12:00", value: 0 },
        { bgTime: "12:00", endTime: "13:00", value: 0 },
        { bgTime: "13:00", endTime: "14:00", value: 0 },
        { bgTime: "14:00", endTime: "15:00", value: 0 },
        { bgTime: "15:00", endTime: "16:00", value: 0 },
        { bgTime: "16:00", endTime: "17:00", value: 0 },
      ],
      timer: undefined
    }
  },
  methods: {
    backToHome() {
      uni.navigateTo({
        url: `/pages/index/index`
      })
    },
    inputChange(count) {
      clearTimeout(this.timer)

      this.productionNum = Number(count)
      this.timer = setTimeout(() => {
        const average = Math.floor(count / this.timeInfo.length)
        this.timeInfo.forEach(item => item.value = average)
        const reduce = count - average * this.timeInfo.length
        this.timeInfo[this.timeInfo.length - 1].value += reduce
      }, 500)
    },
    clearIcon() {
      this.productionNum = 0
      this.timeInfo.forEach(item => item.value = 0)
    },
    clearItemIcon(idx) {
      this.timeInfo[idx].value = 0
    },
    async submit() {
      const sewingGoalDetailDtoList = [...this.timeInfo]
      sewingGoalDetailDtoList.forEach(item => {
        item.goal = item.value
      })

      const params = {
        sewingId: this.sewingId,
        statisticDate: moment(new Date()).format('YYYY-MM-DD'),
        goal: this.productionNum,
        sewingGoalDetailDtoList: sewingGoalDetailDtoList,
        id: this.id
      }

      const res =  await updateSewingGoal(params)
      if (+res.code === 0) {
        uni.showToast({
          title: '更新成功',
          icon: 'none'
        })
      } else {
        uni.showToast({
          title: '更新失败',
          icon: 'none'
        })
      }
    },
    async initLineInfo() {
      const toady = moment(new Date()).format('YYYY-MM-DD')
      const res = await getGoalDetails({
        sewingId: this.sewingId,
        yearMonth: toady
      })
      console.log(res, 'res');
      if (+res.code === 0) {
        this.productionNum = res.data.reduce((prev, item) => {
          item.value = item.goal || 0
          item.statisticDate = toady
          this.id = item.sewingGoalId
          prev += item.goal || 0
          return prev
        }, 0)

        console.log(res.data, 'res.data');
        this.timeInfo = res.data
      }
    }
  },
  created() {

  },
  watch: {
    timeInfo: {
      handler(data) {
        const sum = data.reduce((pre, cur) => pre + (cur.value ? Number(cur.value) : 0), 0)
        this.productionNum = sum
      },
      deep: true
    }
  },
  mounted() {
    // 初始化的时候 更新今日产量productionNum值
    // 更新timeInfo的内容
  },
  onLoad(option) {
    this.sewingId = option.sewingId

    this.initLineInfo()
  },
  onShow() {},

}
</script>

<template>
  <view class="page">
    <commonNav :currentSewLine="currentSewLine.sewingName" :navTitle="navTitle" @backRouter="backToHome" />

    <view class="content">
      <view class="production">
        <view class="label">今日产量</view>
        <view class="uni-input-wrapper">
          <u-input 
          class="numberInput"
          type="number"
          v-model="productionNum" 
          :placeholder="$t('lineProductionAim.enterAim')"
          @input="inputChange"
          :min="0"
          ></u-input>
          <uni-icons class="clearIcon" type="clear" size="30" @click="clearIcon"></uni-icons>
        </view>
      </view>

      <view class="itemBox">
        <view v-for="(item, idx) in timeInfo" class="item">
          <view class="label tag">{{item.bgTime}}-{{item.endTime}}</view>
          <view class="uni-input-wrapper">
            <u-input
              :min="0" 
              type="number" 
              v-model="item.value" 
              :placeholder="$t('lineProductionAim.enterAim')"
            ></u-input>
            <uni-icons class="clearIcon" type="clear" size="30" @click="() => clearItemIcon(idx)"></uni-icons>
          </view>
        </view>
      </view>

      <view class="btns">
        <view @click="submit" class="submitBtn">提交</view>
      </view>
    </view>
  </view>

</template>

<style lang="less" scoped>
.page {
	width: 100%;
}

.uni-input-wrapper {
  position: relative;
}

.clearIcon {
  position: absolute;
  right: 24rpx;
  top: 10rpx;
  z-index: 2;
}

.content {
  padding: 150rpx 48rpx 0;
}
.production {
  width: 800rpx;
  margin-right: 60rpx;
  margin-bottom: 48rpx;
  display: flex;
  align-items: center;
}
.itemBox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.item {
  display: flex;
  align-items: center;
  width: 800rpx;
  margin-bottom: 16rpx;
}

.label {
  padding-top: 18rpx;
  margin-bottom: 24rpx;
  margin-right: 32rpx;
  min-width: 200rpx;
  font-size: 36rpx;
}

.tag {
  margin-right: 24rpx;
}
.btns {
  margin-top: 24rpx;
  display: flex;
  justify-content: flex-end;
}

.submitBtn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 36rpx;
  padding: 16rpx 60rpx;
  border-radius: 12rpx;
  color: #fff;
  background-color: #1890ff;
}
</style>